<template>
  <!-- v-if 是解决前面。网络慢的时候，请求回来数据，在还没渲染的时候，价格那里会一闪而过undefind。 -->
  <view class="goods_detail" v-if="goods">
    <navigator class="goods_details">
      <!-- 轮播图的实现 -->
      <view class="swiperList">
        <u-swiper
          name="pics_big"
          :list="goods.pics"
          :effect3d="true"
          height="750"
          @click="handlerPreviewimage"
        ></u-swiper>
      </view>
      <!-- 商品价格 -->
      <view class="goods-price"> ￥{{ goods.goods_price }} </view>
      <!-- 商品介绍 -->
      <view class="goods-title u-line-2">
        {{ goods.goods_name }}
      </view>
    </navigator>
    <!-- 图文详情板块  为啥直接解析这个变量会直接报错》》nodes="{{richText}}"-->
    <view class="info">
      <view class="info">图文详情 </view>
      <!-- rich适合解析一些轻量的标题和文字。。。uview提供了更好的。，parse可以处理一些比较复杂的数据 -->
      <!-- 对于轻量、简单的字符串，rich-text性能更好
      对于复杂的字符串，使用parse组件效果更好，有更多的自定义属性和效果
      总结：如果是简单的场景，比如一段简单的文字和图片内容，可以优先使用rich-text组件，在文章内容，商品详情等复杂的文本详情，可以优先使用parse组件。 -->
      <!-- <rich-text class="richText" :nodes="goods.goods_introduce"></rich-text>  -->
      <u-parse class="richText" :html="goods.goods_introduce"></u-parse>
    </view>
    <!-- 提交订单栏模块 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <navigator
          open-type="switchTab"
          class="item car"
          url="/pages/cart/cart"
        >
          <u-badge
            class="car-num"
            :count="allCount"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="handlerCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods: null,
      // goods:{}
      // swiperLists: [],
      // title: "",
      // price: "",
      // // 富文本
      // richText: "",
    };
  },
  computed: {
    // list() {
    //   return this.$store.state.list;
    // },
    // allCount() {
    //   let allCount = 0;
    //   this.$store.state.list.forEach((goods) => {
    //     if (goods.checked) {
    //       allCount += goods.count;
    //     }
    //   });
    //   return allCount;
    // },
    allCount() {
      return this.$store.getters.allCount;
    },
  },
  async onLoad({ id }) {
    // const { id } = option;
    // const id = 47869;
    // console.log(option);
    // 发送请求 id是必传属性
    // const res = await this.$u.get("/goods/detail", { goods_id: id });
    const res = await this.$u.get("/goods/detail", { goods_id: id });
    this.goods = res.message;
    // // 渲染轮播图
    // this.swiperLists = res.message.pics;
    // // 渲染商品介绍
    // this.title = res.message.goods_name;
    // // 渲染商品价格
    // this.price = res.message.goods_price;
    // // 渲染富文本
    // this.richText = res.message.goods_introduce;
    console.log(11, res);
    console.log(this.swiperLists);
  },
  methods: {
    // uview提供了   click	点击轮播图时触发	index：点击了第几张图片，从0开始
    // current	string	urls 的第一张		当前显示图片的链接
    handlerPreviewimage(index) {
      const urls = this.goods.pics.map((v) => v.pics_big);
      const current = urls[index];
      uni.previewImage({ urls, current });
    },
    // handlerCart(num) {
    //   console.log(num);
    //   this.$store.commit("addCount", num);
    //   // this.count = this.$store.state.count;
    // },
    handlerCart() {
      // 判断当前的商品有没有添加过  findIndex
      const index = this.$store.state.list.findIndex(
        (goods) => goods.goods_id === this.goods.goods_id
      );
      // 把数组取出来
      const list = this.$store.state.list;
      if (index === -1) {
        // 没找到就添加数据
        list.push({ ...this.goods, checked: true, count: 1 });
      } else {
        // 找到了就进行数量加一
        list[index].count++;
      }
      this.$store.commit("getList", list);
      uni.showToast({
        title: "添加成功",
        icon: "none",
      });
    },
  },
};
</script>

<style lang="scss">
.goods_detail {
  padding-bottom: 102rpx;
}
.goods-price {
  font-size: 36rpx;
  color: #eb4450;
  margin: 10rpx 0 10rpx 30rpx;
}
.goods-title {
  font-size: 30rpx;
  margin-left: 30rpx;
}
.navigation {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>